<template>
	<view>
		<view class="top">
			<zl-navbar title="课程详情" :txt-color="'#000'" bg-color="transparent" :isShowLeft="true"></zl-navbar>
			<view class="left-circle"></view>
			<view class="right-circle"></view>

			<view class="title-box">
				<view class="title">{{courseName}}</view>
				<view>{{courseDesc}}</view>
			</view>
		</view>

		<view class="bottom">
			<view class="chapter-area">
				<view v-for="(item,index) in list" :key="index" class="item">
					<view class="left">
						<view class="chapter-name">{{item.chapterName}}</view>
						<view class="chapter-desc">{{item.chapterDesc}}</view>
					</view>
					<view class="right">
						<u-button @click="submit" shape="circle" text="刷题" color="#8BD3DD"></u-button>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getCourseDetail,
		getChatperList
	} from "@/utils/api.js"
	import qs from 'qs'

	const courseName = ref("")
	const courseDesc = ref("")


	onLoad(async (option) => { //onShow重新加载一次列表
		if (option.courseId) {
			let res = await getCourseDetail(option.courseId)
			courseName.value = res.data.courseName
			courseDesc.value = res.data.courseDesc
			queryParam.courseId = option.courseId
			getList()
		}
	})


	onShow(() => { //onShow重新加载一次列表
		queryParam.pageNum = 1
		total.value = 0
		list.value = []
	})

	//uniapp页面触底事件
	onReachBottom(() => {
		if (queryParam.pageNum * queryParam.pageSize >= total.value) {
			uni.showToast({
				title: "已经到底啦",
				icon: 'none'
			})
			return
		}
		queryParam.pageNum += 1
		getList()
	})

	const list = ref([]) //审批列表


	const queryParam = reactive({
		pageNum: 1,
		pageSize: 10,
		courseId: null
	}) //查询参数


	const total = ref(0)

	//获取活动列表
	async function getList() {
		let res = await getChatperList(qs.stringify(queryParam))
		list.value = list.value.concat(res.rows)
		console.log(list.value);
		total.value = res.total //分页总数
	}
</script>

<style scoped lang="scss">
	.top {
		position: relative;
		height: 24vh;
		background-color: #F582AE;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
		box-shadow: 2rpx 2rpx 12rpx 0rpx rgba(245, 130, 174, 0.6);

		.left-circle {
			position: absolute;
			width: 60rpx;
			height: 6vh;
			left: -20rpx;
			border-radius: 50%;
			background-color: rgba(#fff, 0.3);
		}

		.right-circle {
			position: absolute;
			width: 130rpx;
			height: 7vh;
			right: -4vw;
			bottom: 0;
			border-radius: 50%;
			background-color: rgba(#fff, 0.3);
		}

		.title-box {
			margin: 1vh 0;
			margin-left: 4vw;
			color: #fff;

			.title {
				margin-bottom: 2vh;
			}
		}
	}

	.bottom {
		margin-top: 2vh;

		.chapter-area {
			.item {
				margin: 0 3vw;
				margin-bottom: 1vh;
				padding: 2vh 6vw;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: rgba(#FEF6E4, 0.7);
				border-radius: 18rpx;

				.chapter-name {
					font-weight: 500;
					margin-bottom: 3vh;
				}

				.u-button {
					padding: 1vh 4vw;
					font-size: 10rpx !important;
				}
			}
		}
	}
</style>